import React from 'react';

import styles from './searchbar.css';
import getThemeColor from "../../utils/themeutil";

class SearchBar extends React.Component {

  handleSearch = () => {
    const node = this.node;
    const content = node.value.trim();
    if (!content) {
      node.value = "";
      node.placeholder = '搜索文本不能为空!';
      node.focus();
      return;
    }

    if (content.length > 6) {
      node.value = "";
      node.placeholder = '搜索文本不要超过6个字';
      node.focus();
      return;
    }

    this.props.search({
      content: content,
      lastId: 0,
    });
  };

  render() {
    return (
      <div className={styles.container}>
        <input id={'searchContent'} defaultValue={this.props.searchContent}
               style={{
                 color: getThemeColor()
               }} ref={n => this.node = n}/>
        <button onClick={this.handleSearch} style={{
          backgroundColor: getThemeColor()
        }}> 搜一下
        </button>
      </div>
    )
  }
}

export default SearchBar;
